<template>
  <div class="app-container">
    <div class="divBar" />
    <h5 class="titleInfo">创建体验券</h5>
    <el-form
      ref="form"
      class="form"
      :rules="rules"
      :model="form"
      label-width="150px"
    >
      <!-- <el-col :span="12"> -->
      <el-form-item label="体验券名称" prop="name">
        <el-input v-model="form.name" />

      </el-form-item>
      <!-- </el-col> -->
      <el-row>
        <el-col :span="5">
          <el-form-item label="服务名称" prop="service">
            <el-input v-model="form.service" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" @click="dialogTableVisible=true">选择服务</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="有效期" prop="valid_time">
            <el-date-picker
              v-model="form.valid_time"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :picker-options="startDateLimit"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <span class="showText">说明：提交后需在列表页点击“发布“才会生成体验券，发布前可修改体验券批次信息
      </span>
      <el-form-item>
        <el-button
          style="margin:30px 0"
          type="primary"
          @click="submit('form')"
        >提交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="选择服务"
      :visible.sync="dialogTableVisible"
      center
      width="30%"
      @close="clears"
    >
      <el-form :inline="true" :model="form1" class="demo-form-inline">
        <el-form-item label="服务名称">
          <el-input v-model="form1.keyword" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @cell-dblclick="handledblclick"
        @current-change="handleCurrent"
      >
        <el-table-column prop="service_name" label="服务名称" align="center" />
        <el-table-column prop="price" label="售价" align="center" />
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.create_time.split(' ')[0] }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.pageNum"
            :page-sizes="page_sizes"
            :page-size="form1.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { serviceList, updatePut } from '@/api/couponsList'

export default {
  data() {
    // 名称验证
    var projectName = (rule, value, callback) => {
      const reg1 = new RegExp("[`!@#$^&*|':;',.<>/?~！@#￥……&*——|‘；：']")
      const reg2 = /(^\_)|(\__)|(\_+$)/
      const reg3 = /^\d+\d+\d$/
      if (!value) {
        callback(new Error('请输入名称'))
      } else if (reg1.test(value)) {
        callback(new Error('名称不能有特殊字符'))
      } else if (reg2.test(value)) {
        callback(new Error('名称首尾不能出现下划线'))
      } else if (reg3.test(value)) {
        callback(new Error('名称不能全为数字'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        name: [
          { required: true, validator: projectName, trigger: 'blur' },
          { min: 1, max: 30, message: '名称不可超过30个字', trigger: 'blur' }
        ],
        service: [{ required: true, message: '请选择服务', trigger: 'blur' }],
        valid_time: [{ required: true, message: '请选择有效期' }]
      },
      form: {
        name: '',
        service_id: '',
        valid_time: [],
        service: ''
      },
      dialogTableVisible: false,
      tableData: [],
      form1: {
        page: 1,
        pageSize: 10,
        keyword: ''
      },
      // 分页
      page_sizes: [10, 30, 50, 100],
      page_totals: 60,
      startDateLimit: {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.startDateLimit = {
        disabledDate(time) {
          return time.getTime() < new Date().getTime() - 8.64e7
        }
      }
    })
    this.getInfo()
  },
  mounted() {
    const data = this.$route.params
    const start = data.start_time.split(' ')[0]
    const end = data.end_time.split(' ')[0]
    this.form = {
      id: data.id,
      name: data.name,
      service: data.service_name,
      service_id: data.service_id,
      valid_time: [start, end]
    }
  },
  methods: {
    submit(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          updatePut(this.form).then(res => {
            console.log(res)
            if (res.data.code == 200) {
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.$router.push('couponsList')
            }
          })
        } else {
          this.$message({
            message: '有必填项没填，不能提交咯',
            type: 'warning'
          })
          return false
        }
      })
    },
    clears() {
      this.form1 = {
        page: 1,
        pageSize: 10,
        keyword: ''
      }
      this.dialogTableVisible = false
    },
    getInfo() {
      serviceList(this.form1).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.tableData = res.data.data
          this.page_totals = res.data.total
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      })
    },
    handleCurrent(val) {
      this.currentRow = val
    },
    // 双击选中
    handledblclick(row) {
      console.log(row)
      this.form.service_id = row.id
      this.form.service = row.service_name
      this.dialogTableVisible = false
    },
    // 筛选
    onSubmit() {
      this.getInfo(this.form1)
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form1.pageSize = val
      this.getInfo(this.form1)
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form1.page = val
      this.getInfo(this.form1)
    }
  }
}
</script>
<style scoped>
.showText{
  color: red;
  display: block;
  margin: 20px 0 10px 50px;
  font-weight: 400;
  font-size: 14px;
}

</style>
